<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>

<!--组件可以进行套娃操作，牛蛙！！！！-->
<script src="../js/vue.js"></script>
<script>
    //1.创建第一个组件构造器
    const cpnC1 = Vue.extend({
      template: `  <div>
    <h2>标题1</h2>
    <p>内容456</p>
    </div> `
    })
    //2.创建第二个组件构造器
    const cpnC2 = Vue.extend({
        template: `  <div>
    <h2>标题2</h2>
    <p>内容123</p>
        <cpn1></cpn1>
    </div> `,
        components: {
            cpn1 : cpnC1
        }
    })

    const  app = new Vue({
      el:'#app',
      data:{
        message: '卢本伟牛逼！'
      },
      components: {

          cpn2 : cpnC2
      }
    })
</script>
</body>
</html>